<template>
	<view class="little-video-item" @click="goLittleVideoDetail(videoVal.id)">
		<image :src="videoVal.video.imgUrl" mode="" class="little-bg" />
		<view class="title">
			{{videoVal.title}}
		</view>
		<view class="video-info">
			<image :src="videoVal.user.avatarurl" mode="" class="little-img" />
			<view class="info-text">
				{{videoVal.user.nickName}}
			</view>
			<image src="https://p1.meituan.net/moviemachine/5377c2c03dacf20b6e286e3e72dd57911272.png@80q" mode=""
				class="little-icon" />
			<view class="like-count">
				{{videoVal.upCount}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps
	} from 'vue'
	const props = defineProps({
		videoVal: Object
	})

	const goLittleVideoDetail = (id) => {
		// console.log(id, 'id');
		uni.navigateTo({
			url: `/pages/littleVideoDetail/littleVideoDetail?item=${encodeURIComponent(JSON.stringify(props.videoVal))}`
		});
	}
</script>

<style lang="scss">
	.little-video-item {
		position: relative;
		display: inline-block;
		width: 49.5%;
		height: 600rpx;
		margin: 0 .5% 4rpx 0;

		.little-bg {
			width: 100%;
			height: 600rpx;
		}

		.title {
			width: 340rpx;
			margin: 16rpx;
			position: absolute;
			color: #fff;
			font-size: 30rpx;
			line-height: 42rpx;
			bottom: 75rpx;
			text-shadow: 0 0 6rpx rgba(0, 0, 0, .3);
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.video-info {
			width: 340rpx;
			margin: 16rpx;
			position: absolute;
			color: #fff;
			display: flex;
			align-items: center;
			bottom: 10rpx;
			font-size: 26rpx;
			background-color: rgba(0, 0, 0, .1);

			.little-img {
				opacity: .9;
				border: 0 solid rgba(42, 42, 42, .05);
				border-radius: 50%;
				width: 44rpx;
				height: 44rpx;
			}

			.info-text {
				margin: 0 12rpx;
				flex: 1;
				display: inline-block;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.little-icon {
				display: inline-block;
				width: 36rpx;
				height: 36rpx;
				margin-right: 6rpx;
				background-color: transparent;
			}


			.like-count {
				width: 74rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}


	}
</style>